<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拍照姿势推荐小程序 - UI/UX设计 V9</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 使用 Material Symbols Rounded 作为更现代的图标 -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0" />
  <style>
    body {
      background-color: #f8fafc;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    .phone-mockup {
      width: 375px;
      height: 812px; /* 更高的屏幕比例，符合现代手机 */
      border-radius: 40px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
      border: 12px solid #111;
      background-color: #fff;
    }
    .status-bar {
      height: 44px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      font-size: 12px;
      color: #000;
      position: sticky;
      top: 0;
      z-index: 30;
    }
    .content-container {
      height: calc(100% - 44px - 70px); /* 减去状态栏和tabbar的高度 */
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      scroll-behavior: smooth;
    }
    .glass-effect {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
    }
    .pose-card {
      border-radius: 28px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
      transition: all 0.3s ease;
    }
    .pose-card:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    }
    .tabbar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 70px;
      padding: 8px 24px;
      background: white;
      border-top: 1px solid rgba(0, 0, 0, 0.03);
      z-index: 20;
    }
    .material-symbols-rounded {
      font-size: 28px;
      font-variation-settings: 'FILL' 1;
    }
    .pose-illustration {
      width: 100%;
      height: 160px;
      background-color: #FFF0F3;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FF6B6B;
      position: relative;
      overflow: hidden;
    }
    .pose-illustration::before {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(255, 107, 107, 0.1);
      top: -30px;
      right: -30px;
    }
    .pose-illustration::after {
      content: "";
      position: absolute;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255, 107, 107, 0.1);
      bottom: -20px;
      left: -20px;
    }
    .blob-shape {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      z-index: -1;
      opacity: 0.6;
    }
    .gradient-btn {
      background: linear-gradient(135deg, #FF9A9E 0%, #FAD0C4 100%);
      transition: all 0.3s ease;
    }
    .gradient-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(255, 107, 107, 0.2);
    }
    .inspiration-btn {
      background: linear-gradient(135deg, #64B5F6 0%, #90CAF9 100%);
      transition: all 0.3s ease;
    }
    .inspiration-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(100, 181, 246, 0.2);
    }
    .category-btn {
      transition: all 0.3s ease;
    }
    .category-btn:hover {
      transform: translateY(-2px) scale(1.05);
    }
    /* 自定义滚动条 */
    .content-container::-webkit-scrollbar {
      width: 6px;
    }
    .content-container::-webkit-scrollbar-track {
      background: transparent;
    }
    .content-container::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 20px;
    }
    /* 动画效果 - 减小幅度 */
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-5px); }
      100% { transform: translateY(0px); }
    }
    .float-animation {
      animation: float 4s ease-in-out infinite;
    }
    /* 姿势详情页新样式 */
    .pose-detail-container {
      height: 500px;
      position: relative;
      overflow: hidden;
    }
    .pose-tip-text {
      position: absolute;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(4px);
      border-radius: 12px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: medium;
      color: #333;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      z-index: 10;
      max-width: 150px;
    }
    .tip-1 {
      top: 120px;
      left: 20px;
    }
    .tip-2 {
      top: 250px;
      right: 20px;
    }
    .tip-3 {
      bottom: 120px;
      left: 50%;
      transform: translateX(-50%);
    }
    /* 我的页面新样式 */
    .profile-header {
      background: linear-gradient(135deg, #5E72EB 0%, #FF9190 100%);
      border-radius: 0 0 30px 30px;
      padding: 20px;
      position: relative;
      overflow: hidden;
    }
    .profile-header::before {
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      top: -50px;
      right: -50px;
    }
    .profile-header::after {
      content: "";
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      bottom: -30px;
      left: -30px;
    }
    .feature-card {
      border-radius: 20px;
      background: white;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }
    .feature-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    /* 随机播放动画 */
    @keyframes randomPose {
      0% { transform: scale(1) rotate(0deg); opacity: 1; }
      20% { transform: scale(0.9) rotate(-5deg); opacity: 0.8; }
      40% { transform: scale(1.1) rotate(5deg); opacity: 1; }
      60% { transform: scale(0.95) rotate(-3deg); opacity: 0.9; }
      80% { transform: scale(1.05) rotate(3deg); opacity: 1; }
      100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }
    .random-pose-animation {
      animation: randomPose 1.5s ease-in-out infinite;
    }
    .random-pose-container {
      position: relative;
      cursor: pointer;
    }
    .play-pause-indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      z-index: 20;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .random-pose-container:hover .play-pause-indicator {
      opacity: 1;
    }
    .random-pose-info {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      text-align: center;
      color: white;
      font-size: 14px;
      font-weight: medium;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      z-index: 10;
    }
    .pose-change-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(255,107,107,0) 0%, rgba(255,107,107,0.1) 100%);
      z-index: 5;
      pointer-events: none;
    }
  </style>
</head>
<body class="p-8 flex flex-col items-center">
  <h1 class="text-3xl font-bold text-center mb-8">拍照姿势推荐小程序 - UI/UX设计 2025 V9</h1>
  
  <div class="flex flex-wrap justify-center gap-12">
    <!-- 首页 -->
    <div class="phone-mockup">
      <div class="status-bar">
        <span>20:30</span>
        <div class="flex gap-1">
          <span class="material-symbols-rounded" style="font-size: 16px;">wifi</span>
          <span class="material-symbols-rounded" style="font-size: 16px;">battery_full</span>
        </div>
      </div>
      
      <div class="content-container">
        <!-- 背景装饰 -->
        <div class="blob-shape w-40 h-40 bg-pink-200 top-20 -left-20"></div>
        <div class="blob-shape w-60 h-60 bg-blue-100 bottom-40 -right-20"></div>
        
        <!-- 顶部欢迎区 -->
        <div class="p-6">
          <h2 class="text-2xl font-bold text-[#FF6B6B] mb-2">今天想拍什么样的照片？</h2>
          <p class="text-gray-600">让我们帮你找到完美的姿势 ✨</p>
        </div>

        <!-- 随机推荐按钮 -->
        <div class="px-6 mb-8">
          <button class="w-full h-36 gradient-btn rounded-3xl flex flex-col items-center justify-center text-white shadow-lg relative overflow-hidden">
            <div class="absolute top-0 left-0 w-full h-full">
              <div class="absolute top-5 right-5 w-20 h-20 rounded-full bg-white/10"></div>
              <div class="absolute bottom-5 left-5 w-16 h-16 rounded-full bg-white/10"></div>
            </div>
            <div class="w-20 h-20 bg-white/30 rounded-full flex items-center justify-center mb-3 float-animation">
              <span class="material-symbols-rounded text-5xl">auto_awesome</span>
            </div>
            <span class="text-xl font-medium">随机推荐姿势</span>
          </button>
        </div>

        <!-- 快速场景选择 - 更新分类 -->
        <div class="px-6 mb-8">
          <div class="flex gap-4 overflow-x-auto pb-4 no-scrollbar">
            <button class="category-btn flex-shrink-0 h-28 w-28 bg-[#FFB7B2] rounded-3xl flex flex-col items-center justify-center text-white shadow-md">
              <span class="material-symbols-rounded mb-2 text-4xl">female</span>
              <span class="text-sm font-medium">女生</span>
            </button>
            <button class="category-btn flex-shrink-0 h-28 w-28 bg-[#A8E6CF] rounded-3xl flex flex-col items-center justify-center text-white shadow-md">
              <span class="material-symbols-rounded mb-2 text-4xl">male</span>
              <span class="text-sm font-medium">男生</span>
            </button>
            <button class="category-btn flex-shrink-0 h-28 w-28 bg-[#B4A7D6] rounded-3xl flex flex-col items-center justify-center text-white shadow-md">
              <span class="material-symbols-rounded mb-2 text-4xl">favorite</span>
              <span class="text-sm font-medium">情侣</span>
            </button>
            <button class="category-btn flex-shrink-0 h-28 w-28 bg-[#FFD3B6] rounded-3xl flex flex-col items-center justify-center text-white shadow-md">
              <span class="material-symbols-rounded mb-2 text-4xl">groups</span>
              <span class="text-sm font-medium">团体</span>
            </button>
          </div>
        </div>

        <!-- 热门姿势 - 更紧凑的布局 -->
        <div class="px-6 pb-24">
          <h3 class="text-lg font-semibold mb-4 text-gray-700 flex items-center">
            <span class="material-symbols-rounded mr-2 text-[#FF6B6B]">local_fire_department</span>
            热门姿势
          </h3>
          <div class="grid grid-cols-2 gap-4">
            <div class="pose-card p-4">
              <div class="pose-illustration mb-3">
                <span class="material-symbols-rounded text-6xl">accessibility_new</span>
              </div>
              <div class="flex justify-between items-center">
                <h4 class="font-medium text-gray-800">自然站姿</h4>
                <div class="flex items-center">
                  <span class="material-symbols-rounded text-pink-400 text-sm">favorite</span>
                  <span class="text-xs text-gray-400 ml-1">2.4k</span>
                </div>
              </div>
              <p class="text-xs text-gray-500 mt-1">适合初学者的基础姿势</p>
            </div>
            
            <div class="pose-card p-4">
              <div class="pose-illustration mb-3">
                <span class="material-symbols-rounded text-6xl">sentiment_satisfied</span>
              </div>
              <div class="flex justify-between items-center">
                <h4 class="font-medium text-gray-800">休闲靠墙</h4>
                <div class="flex items-center">
                  <span class="material-symbols-rounded text-pink-400 text-sm">favorite</span>
                  <span class="text-xs text-gray-400 ml-1">1.8k</span>
                </div>
              </div>
              <p class="text-xs text-gray-500 mt-1">街拍必备的休闲姿势</p>
            </div>
            
            <div class="pose-card p-4">
              <div class="pose-illustration mb-3">
                <span class="material-symbols-rounded text-6xl">self_improvement</span>
              </div>
              <div class="flex justify-between items-center">
                <h4 class="font-medium text-gray-800">优雅坐姿</h4>
                <div class="flex items-center">
                  <span class="material-symbols-rounded text-pink-400 text-sm">favorite</span>
                  <span class="text-xs text-gray-400 ml-1">3.1k</span>
                </div>
              </div>
              <p class="text-xs text-gray-500 mt-1">展现气质的室内拍摄</p>
            </div>
            
            <div class="pose-card p-4">
              <div class="pose-illustration mb-3">
                <span class="material-symbols-rounded text-6xl">sports_gymnastics</span>
              </div>
              <div class="flex justify-between items-center">
                <h4 class="font-medium text-gray-800">动感跳跃</h4>
                <div class="flex items-center">
                  <span class="material-symbols-rounded text-pink-400 text-sm">favorite</span>
                  <span class="text-xs text-gray-400 ml-1">2.7k</span>
                </div>
              </div>
              <p class="text-xs text-gray-500 mt-1">充满活力的动态姿势</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航 -->
      <div class="tabbar flex justify-around items-center">
        <button class="flex flex-col items-center">
          <span class="material-symbols-rounded text-[#FF6B6B]">home</span>
          <span class="text-xs mt-1 text-[#FF6B6B] font-medium">首页</span>
        </button>
        <button class="flex flex-col items-center relative">
          <div class="w-16 h-16 inspiration-btn rounded-full flex items-center justify-center -mt-6 shadow-lg">
            <span class="material-symbols-rounded text-white text-3xl">auto_awesome</span>
          </div>
          <span class="text-xs mt-1 text-gray-400">灵感</span>
        </button>
        <button class="flex flex-col items-center">
          <span class="material-symbols-rounded text-gray-400">person</span>
          <span class="text-xs mt-1 text-gray-400">我的</span>
        </button>
      </div>
    </div>

    <!-- 随机姿势详情页 - 新增随机播放功能 -->
    <div class="phone-mockup">
      <div class="status-bar">
        <span>20:30</span>
        <div class="flex gap-1">
          <span class="material-symbols-rounded" style="font-size: 16px;">wifi</span>
          <span class="material-symbols-rounded" style="font-size: 16px;">battery_full</span>
        </div>
      </div>
      
      <div class="content-container">
        <!-- 随机姿势容器 -->
        <div class="random-pose-container w-full h-[500px] bg-gradient-to-b from-[#FFE5E5] to-[#FFF0F3] relative">
          <!-- 顶部操作按钮 -->
          <div class="absolute top-4 left-4 z-20">
            <button class="w-12 h-12 rounded-full bg-white/80 backdrop-blur-md flex items-center justify-center shadow-md">
              <span class="material-symbols-rounded">arrow_back</span>
            </button>
          </div>
          
          <div class="absolute top-4 right-4 z-20 flex gap-2">
            <button class="w-12 h-12 rounded-full bg-white/80 backdrop-blur-md flex items-center justify-center shadow-md">
              <span class="material-symbols-rounded text-pink-500">favorite</span>
            </button>
            <button class="w-12 h-12 rounded-full bg-white/80 backdrop-blur-md flex items-center justify-center shadow-md">
              <span class="material-symbols-rounded">share</span>
            </button>
          </div>
          
          <!-- 播放/暂停指示器 -->
          <div class="play-pause-indicator">
            <span class="material-symbols-rounded text-[#FF6B6B]">pause</span>
          </div>
          
          <!-- 随机姿势展示 -->
          <div class="relative w-full h-full flex items-center justify-center">
            <div class="absolute top-10 right-10 w-32 h-32 rounded-full bg-[#FF6B6B]/10"></div>
            <div class="absolute bottom-10 left-10 w-24 h-24 rounded-full bg-[#FF6B6B]/10"></div>
            <span class="material-symbols-rounded text-[#FF6B6B] random-pose-animation" style="font-size: 240px">accessibility_new</span>
            
            <!-- 姿势要点文字提示 -->
            <div class="pose-tip-text tip-1">身体重心偏向一侧，保持放松</div>
            <div class="pose-tip-text tip-2">手臂自然下垂或一只手插兜</div>
            <div class="pose-tip-text tip-3">双脚自然站立，一只脚稍微向前</div>
          </div>
          
          <!-- 随机播放信息 -->
          <div class="random-pose-info">
            <p class="text-sm bg-black/30 inline-block px-3 py-1 rounded-full backdrop-blur-sm">
              点击屏幕暂停 · 再次点击继续随机
            </p>
          </div>
          
          <!-- 姿势切换效果 -->
          <div class="pose-change-overlay"></div>
        </div>

        <!-- 内容区域 -->
        <div class="p-6 pb-24">
          <div class="mb-6">
            <div class="flex justify-between items-start">
              <div>
                <h2 class="text-2xl font-bold text-gray-800">随机姿势推荐</h2>
                <p class="text-gray-500 text-sm mt-1">点击屏幕可暂停当前姿势</p>
              </div>
              <div class="flex items-center bg-[#FFE5E5] px-3 py-1 rounded-full">
                <span class="material-symbols-rounded text-[#FF6B6B] mr-1" style="font-size: 18px;">autorenew</span>
                <span class="text-sm font-medium text-[#FF6B6B]">随机中</span>
              </div>
            </div>
          </div>

          <button class="w-full py-4 gradient-btn text-white rounded-2xl font-medium flex items-center justify-center shadow-lg">
            <span class="material-symbols-rounded mr-2">bookmark_add</span>
            保存当前姿势
          </button>
        </div>
      </div>

      <!-- 底部导航 -->
      <div class="tabbar flex justify-around items-center">
        <button class="flex flex-col items-center">
          <span class="material-symbols-rounded text-gray-400">home</span>
          <span class="text-xs mt-1 text-gray-400">首页</span>
        </button>
        <button class="flex flex-col items-center relative">
          <div class="w-16 h-16 inspiration-btn rounded-full flex items-center justify-center -mt-6 shadow-lg">
            <span class="material-symbols-rounded text-white text-3xl">auto_awesome</span>
          </div>
          <span class="text-xs mt-1 text-gray-400">灵感</span>
        </button>
        <button class="flex flex-col items-center">
          <span class="material-symbols-rounded text-gray-400">person</span>
          <span class="text-xs mt-1 text-gray-400">我的</span>
        </button>
      </div>
    </div>

    <!-- 我的页面 - 简化版 -->
    <div class="phone-mockup">
      <div class="status-bar">
        <span>20:30</span>
        <div class="flex gap-1">
          <span class="material-symbols-rounded" style="font-size: 16px;">wifi</span>
          <span class="material-symbols-rounded" style="font-size: 16px;">battery_full</span>
        </div>
      </div>
      
      <div class="content-container">
        <!-- 个人信息区域 -->
        <div class="profile-header mb-6">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-white">个人中心</h2>
            <button class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
              <span class="material-symbols-rounded text-white">settings</span>
            </button>
          </div>
          
          <div class="flex items-center gap-4">
            <div class="w-20 h-20 rounded-full bg-white/20 flex items-center justify-center">
              <span class="material-symbols-rounded text-white" style="font-size: 36px">person</span>
            </div>
            <div>
              <button class="bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full text-white font-medium text-sm">
                点击登录
              </button>
              <p class="text-white/80 text-xs mt-2">登录后享受更多功能</p>
            </div>
          </div>
        </div>
        
        <!-- 功能区域 - 简化为三个入口 -->
        <div class="px-6 pb-24">
          <div class="space-y-4">
            <div class="feature-card p-4">
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="w-12 h-12 rounded-full bg-[#FFE5E5] flex items-center justify-center mr-3">
                    <span class="material-symbols-rounded text-[#FF6B6B]">bookmark</span>
                  </div>
                  <div>
                    <h4 class="font-medium text-gray-800">我的收藏</h4>
                    <p class="text-xs text-gray-500">查看已收藏的姿势</p>
                  </div>
                </div>
                <span class="material-symbols-rounded text-gray-300">chevron_right</span>
              </div>
            </div>
            
            <div class="feature-card p-4">
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="w-12 h-12 rounded-full bg-[#E5F9FF] flex items-center justify-center mr-3">
                    <span class="material-symbols-rounded text-[#4FC3F7]">support_agent</span>
                  </div>
                  <div>
                    <h4 class="font-medium text-gray-800">联系客服</h4>
                    <p class="text-xs text-gray-500">有问题随时联系我们</p>
                  </div>
                </div>
                <span class="material-symbols-rounded text-gray-300">chevron_right</span>
              </div>
            </div>
            
            <div class="feature-card p-4">
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="w-12 h-12 rounded-full bg-[#E8F5E9] flex items-center justify-center mr-3">
                    <span class="material-symbols-rounded text-[#66BB6A]">info</span>
                  </div>
                  <div>
                    <h4 class="font-medium text-gray-800">关于我们</h4>
                    <p class="text-xs text-gray-500">了解更多关于我们的信息</p>
                  </div>
                </div>
                <span class="material-symbols-rounded text-gray-300">chevron_right</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航 -->
      <div class="tabbar flex justify-around items-center">
        <button class="flex flex-col items-center">
          <span class="material-symbols-rounded text-gray-400">home</span>
          <span class="text-xs mt-1 text-gray-400">首页</span>
        </button>
        <button class="flex flex-col items-center relative">
          <div class="w-16 h-16 inspiration-btn rounded-full flex items-center justify-center -mt-6 shadow-lg">
            <span class="material-symbols-rounded text-white text-3xl">auto_awesome</span>
          </div>
          <span class="text-xs mt-1 text-gray-400">灵感</span>
        </button>
        <button class="flex flex-col items-center">
          <span class="material-symbols-rounded text-gray-400">person</span>
          <span class="text-xs mt-1 text-gray-400">我的</span>
        </button>
      </div>
    </div>
  </div>
</body>
</html>
